<div class="p">
    <div class="row">
        <div class="span-3 m-b">
            <div class="card card-bordered">
                <div class="card-body">
                    <h3>89.9%</h3>
                    <p>Lorem ipsum...</p>
                    <div class="m-tb-sm">
                        <div class="progress progress-success">
                            <div class="progress-inner">
                                <div class="progress-bg" style="width: 39.9%;height: 6px"></div>
                            </div>
                        </div>
                    </div>
                    <p class="text-muted">Lorem ipsum dolor sit amet enim.</p>
                </div>
            </div>
        </div>
        <div class="span-3 m-b">
            <div class="card card-bordered">
                <div class="card-body">
                    <h3>12.124</h3>
                    <p>Lorem ipsum...</p>
                    <div class="m-tb-sm">
                        <div class="progress progress-info">
                            <div class="progress-inner">
                                <div class="progress-bg" style="width: 39.9%;height: 6px"></div>
                            </div>
                        </div>
                    </div>
                    <p class="text-muted">Lorem ipsum dolor sit amet enim.</p>
                </div>
            </div>
        </div>
        <div class="span-3 m-b">
            <div class="card card-bordered">
                <div class="card-body">
                    <h3>$98.111,00</h3>
                    <p>Lorem ipsum...</p>
                    <div class="m-tb-sm">
                        <div class="progress progress-warning">
                            <div class="progress-inner">
                                <div class="progress-bg" style="width: 39.9%;height: 6px"></div>
                            </div>
                        </div>
                    </div>
                    <p class="text-muted">Lorem ipsum dolor sit amet enim.</p>
                </div>
            </div>
        </div>
        <div class="span-3 m-b">
            <div class="card card-bordered">
                <div class="card-body">
                    <h3>2 TB</h3>
                    <p>Lorem ipsum...</p>
                    <div class="m-tb-sm">
                        <div class="progress progress-danger">
                            <div class="progress-inner">
                                <div class="progress-bg" style="width: 39.9%;height: 6px"></div>
                            </div>
                        </div>
                    </div>
                    <p class="text-muted">Lorem ipsum dolor sit amet enim.</p>
                </div>
            </div>
        </div>
        <div class="span-3 m-b">
            <div class="card card-primary card-inverse">
                <div class="card-body">
                    <h3>89.9%</h3>
                    <p>Lorem ipsum...</p>
                    <div class="m-tb-sm">
                        <div class="progress">
                            <div class="progress-inner">
                                <div class="progress-bg" style="width: 39.9%;height: 6px"></div>
                            </div>
                        </div>
                    </div>
                    <p class="text-muted">Lorem ipsum dolor sit amet enim.</p>
                </div>
            </div>
        </div>
        <div class="span-3 m-b">
            <div class="card card-warning card-inverse">
                <div class="card-body">
                    <h3>12.124</h3>
                    <p>Lorem ipsum...</p>
                    <div class="m-tb-sm">
                        <div class="progress">
                            <div class="progress-inner">
                                <div class="progress-bg" style="width: 39.9%;height: 6px"></div>
                            </div>
                        </div>
                    </div>
                    <p class="text-muted">Lorem ipsum dolor sit amet enim.</p>
                </div>
            </div>
        </div>
        <div class="span-3 m-b">
            <div class="card card-danger card-inverse">
                <div class="card-body">
                    <h3>$98.111,00</h3>
                    <p>Lorem ipsum...</p>
                    <div class="m-tb-sm">
                        <div class="progress">
                            <div class="progress-inner">
                                <div class="progress-bg" style="width: 39.9%;height: 6px"></div>
                            </div>
                        </div>
                    </div>
                    <p class="text-muted">Lorem ipsum dolor sit amet enim.</p>
                </div>
            </div>
        </div>
        <div class="span-3 m-b">
            <div class="card card-info card-inverse">
                <div class="card-body">
                    <h3>2 TB</h3>
                    <p>Lorem ipsum...</p>
                    <div class="m-tb-sm">
                        <div class="progress">
                            <div class="progress-inner">
                                <div class="progress-bg" style="width: 39.9%;height: 6px"></div>
                            </div>
                        </div>
                    </div>
                    <p class="text-muted">Lorem ipsum dolor sit amet enim.</p>
                </div>
            </div>
        </div>
        <div class="span-3 m-b">
            <div class="card card-bordered">
                <div class="card-body">
                    <div class="l bg-primary m-r-sm" style="width:2em;height: 2em;text-align: center;line-height: 2em;font-size:2.5em;">
                        <i class="ion">&#xe68a;</i>
                    </div>
                    <h4 class="text-primary m-0 m-t-sm">$1.999,50</h4>
                    <p class="text-muted m-t-sm"><strong>INCOME</strong></p>
                </div>
            </div>
        </div>
        <div class="span-3 m-b">
            <div class="card card-bordered">
                <div class="card-body">
                    <div class="l bg-info m-r-sm" style="width:2em;height: 2em;text-align: center;line-height: 2em;font-size:2.5em;">
                        <i class="ion">&#xe640;</i>
                    </div>
                    <h4 class="text-info m-0 m-t-sm">$1.999,50</h4>
                    <p class="text-muted m-t-sm"><strong>INCOME</strong></p>
                </div>
            </div>
        </div>
        <div class="span-3 m-b">
            <div class="card card-bordered">
                <div class="card-body">
                    <div class="l bg-warning m-r-sm" style="width:2em;height: 2em;text-align: center;line-height: 2em;font-size:2.5em;">
                        <i class="ion">&#xe632;</i>
                    </div>
                    <h4 class="text-warning m-0 m-t-sm">$1.999,50</h4>
                    <p class="text-muted m-t-sm"><strong>INCOME</strong></p>
                </div>
            </div>
        </div>
        <div class="span-3 m-b">
            <div class="card card-bordered">
                <div class="card-body">
                    <div class="l bg-danger m-r-sm" style="width:2em;height: 2em;text-align: center;line-height: 2em;font-size:2.5em;">
                        <i class="ion">&#xe620;</i>
                    </div>
                    <h4 class="text-danger m-0 m-t-sm">$1.999,50</h4>
                    <p class="text-muted m-t-sm"><strong>INCOME</strong></p>
                </div>
            </div>
        </div>
        <div class="span-3 m-b">
            <div class="card card-inverse card-primary">
                <div class="card-body" style="color:#fff">
                    <div class="l m-r-sm" style="width:2em;height: 2em;text-align: center;line-height: 2em;font-size:2.5em;">
                        <i class="ion">&#xe68a;</i>
                    </div>
                    <h4 class="m-0 m-t-sm">$1.999,50</h4>
                    <p class="text-muted m-t-sm"><strong>INCOME</strong></p>
                </div>
            </div>
        </div>
        <div class="span-3 m-b">
            <div class="card card-inverse card-info">
                <div class="card-body" style="color:#fff">
                    <div class="l m-r-sm" style="width:2em;height: 2em;text-align: center;line-height: 2em;font-size:2.5em;">
                        <i class="ion">&#xe640;</i>
                    </div>
                    <h4 class="m-0 m-t-sm">$1.999,50</h4>
                    <p class="text-muted m-t-sm"><strong>INCOME</strong></p>
                </div>
            </div>
        </div>
        <div class="span-3 m-b">
            <div class="card card-inverse card-warning">
                <div class="card-body" style="color:#fff">
                    <div class="l m-r-sm" style="width:2em;height: 2em;text-align: center;line-height: 2em;font-size:2.5em;">
                        <i class="ion">&#xe632;</i>
                    </div>
                    <h4 class="m-0 m-t-sm">$1.999,50</h4>
                    <p class="text-muted m-t-sm"><strong>INCOME</strong></p>
                </div>
            </div>
        </div>
        <div class="span-3 m-b">
            <div class="card card-inverse card-danger">
                <div class="card-body" style="color:#fff">
                    <div class="l m-r-sm" style="width:2em;height: 2em;text-align: center;line-height: 2em;font-size:2.5em;">
                        <i class="ion">&#xe620;</i>
                    </div>
                    <h4 class="m-0 m-t-sm">$1.999,50</h4>
                    <p class="text-muted m-t-sm"><strong>INCOME</strong></p>
                </div>
            </div>
        </div>
        <div class="span-3 m-b">
            <div class="card card-inverse card-primary">
                <div class="card-head">
                    <div class="card-title">Pageviews</div>
                </div>
                <div class="card-body">
                    <ul class="items items-inverse">
                        <li class="item">
                            <a href="###">Analytics Redesign <span class="item-extra"><strong>24234</strong></span> </a>
                        </li>
                        <li class="item">
                            <a href="###">Analytics Redesign <span class="item-extra"><strong>344</strong></span> </a>
                        </li>
                        <li class="item">
                            <a href="###">Analytics Redesign <span class="item-extra"><strong>13</strong></span> </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="span-3 m-b">
            <div class="card card-inverse card-info">
                <div class="card-head">
                    <div class="card-title">Pageviews</div>
                </div>
                <div class="card-body">
                    <ul class="items items-inverse">
                        <li class="item">
                            <a href="###">Analytics Redesign <span class="item-extra"><strong>24234</strong></span> </a>
                        </li>
                        <li class="item">
                            <a href="###">Analytics Redesign <span class="item-extra"><strong>344</strong></span> </a>
                        </li>
                        <li class="item">
                            <a href="###">Analytics Redesign <span class="item-extra"><strong>13</strong></span> </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="span-3 m-b">
            <div class="card card-inverse card-warning">
                <div class="card-head">
                    <div class="card-title">Pageviews</div>
                </div>
                <div class="card-body">
                    <ul class="items items-inverse">
                        <li class="item">
                            <a href="###">Analytics Redesign <span class="item-extra"><strong>24234</strong></span> </a>
                        </li>
                        <li class="item">
                            <a href="###">Analytics Redesign <span class="item-extra"><strong>344</strong></span> </a>
                        </li>
                        <li class="item">
                            <a href="###">Analytics Redesign <span class="item-extra"><strong>13</strong></span> </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="span-3 m-b">
            <div class="card card-inverse card-danger">
                <div class="card-head">
                    <div class="card-title">Pageviews</div>
                </div>
                <div class="card-body">
                    <ul class="items items-inverse">
                        <li class="item">
                            <a href="###">Analytics Redesign <span class="item-extra"><strong>24234</strong></span> </a>
                        </li>
                        <li class="item">
                            <a href="###">Analytics Redesign <span class="item-extra"><strong>344</strong></span> </a>
                        </li>
                        <li class="item">
                            <a href="###">Analytics Redesign <span class="item-extra"><strong>13</strong></span> </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
